<template>
  <fs-page>
    <template #header>
      <div class="title">
        岗位管理
        <fs-icon icon="gis:position-man" :spin="true" />
      </div>
    </template>
    <n-grid class="mt-5" cols="1 s:1 m:1 l:5 xl:5 2xl:5" responsive="screen" :x-gap="12">
      <n-gi span="1">
        <n-card :segmented="{ content: true }" :bordered="false" size="small">
          <div class="w-full menu">
            <n-input type="input" v-model:value="pattern" placeholder="输入岗位名称搜索">
              <template #suffix>
                <n-icon size="18" class="cursor-pointer">
                  <SearchOutlined />
                </n-icon>
              </template>
            </n-input>
            <div class="py-3 menu-list">
              <template v-if="loading">
                <div class="flex items-center justify-center py-4">
                  <n-spin size="medium" />
                </div>
              </template>
              <template v-else>
                <n-tree
                  block-line
                  cascade
                  default-expand-all
                  :show-irrelevant-nodes="false"
                  :virtual-scroll="true"
                  :pattern="pattern"
                  :data="treeData"
                  style="max-height: 650px; overflow: hidden"
                  @update:selected-keys="selectedKeys"
                />
              </template>
            </div>
          </div>
        </n-card>
      </n-gi>
      <n-gi span="4">
        <n-card :segmented="{ content: true }" :bordered="false" size="huge" style="height: 820px">
          <fs-crud ref="crudRef" v-bind="crudBinding" />
        </n-card>
      </n-gi>
    </n-grid>
  </fs-page>
</template>
<!--<script lang="ts" setup>-->
<!--ts有点问题-->
<script>
  import { defineComponent, onMounted, ref } from 'vue';
  import { SearchOutlined } from '@vicons/antd';
  import { getOrgList } from '@/api/system/org';
  import createCrudOptions from './crud';
  import { useExpose, useCrud } from '@fast-crud/fast-crud';

  export default defineComponent({
    name: 'StationForm',
    setup() {
      const treeData = ref([]);

      const loading = ref(true);
      const pattern = ref('');

      const nodeRef = ref();

      const crudRef = ref();
      const crudBinding = ref();
      const { expose } = useExpose({ crudRef, crudBinding });
      const { crudOptions } = createCrudOptions({ expose, nodeRef });
      useCrud({ expose, crudOptions, permission: 'station:management' });

      onMounted(async () => {
        treeData.value = await getOrgList();
        loading.value = false;
        expose.doRefresh();
      });

      function selectedKeys(keys) {
        nodeRef.value = keys[0];
        expose.doRefresh();
      }

      return {
        SearchOutlined,
        treeData,
        loading,
        pattern,
        crudBinding,
        crudRef,
        selectedKeys,
      };
    },
  });
</script>
